import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { ProgramRankItemWrapper } from './style';
import { getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
  index: number;
  programRankItem: any;
}

const ProgramRankItem: FC<IProps> = (props) => {
  const { index, programRankItem } = props;
  const degree = (10 - index) * 10;
  return (
    <ProgramRankItemWrapper>
      <div className={'index ' + (index <= 3 ? 'top' : '')}>{(index < 10 ? '0' : '') + index}</div>
      <a href="javascript:void(0)" className="program_img">
        <img src={getImgOnSize(programRankItem.program.coverUrl, 40)} alt="" />
        <i className="sprite_icon"></i>
      </a>
      <div className="info">
        <a href="javascript:void(0)">{programRankItem.program.name}</a>
        <a href="javascript:void(0)">{programRankItem.program.radio.name}</a>
      </div>
      <div className="degree sprite_table">
        <i className="sprite_table bar" style={{ width: `${degree}%` }}>
          <i className="sprite_table"></i>
        </i>
      </div>
    </ProgramRankItemWrapper>
  );
};

export default memo(ProgramRankItem);
